<template>
   <div class="discount">
    <van-grid  :column-num="2">
        <van-grid-item v-for="(v,index) in arrDiscount" :key="index">
            <div class="top">
                <h5>{{ v.channel }}</h5>
                <p>{{ v.txt }}</p>
            </div>
            <div class="bottom">
                <a href="#"><img :src="v.img1" alt=""></a>
                <a href="#"><img :src="v.img2" alt=""></a>
            </div>
        </van-grid-item>
          
    </van-grid>
    <div class="bcg"></div>
   </div>
</template>

<script>
export default {
    data() {
        return {
            arrDiscount: [
                { channel: '聚划算', txt: '品牌折扣', img1: '//gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp', img2: '//gw.alicdn.com/tps/O1CN01UkqcOM1aO9Gl7On79_!!6000000003319-0-yinhe.jpg_180x180q90.jpg_.webp' },
                { channel: '聚划算', txt: '品牌折扣', img1: '//gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp', img2: '//gw.alicdn.com/tps/O1CN01UkqcOM1aO9Gl7On79_!!6000000003319-0-yinhe.jpg_180x180q90.jpg_.webp' },
                { channel: '聚划算', txt: '品牌折扣', img1: '//gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp', img2: '//gw.alicdn.com/tps/O1CN01UkqcOM1aO9Gl7On79_!!6000000003319-0-yinhe.jpg_180x180q90.jpg_.webp' },
                { channel: '聚划算', txt: '品牌折扣', img1: '//gw.alicdn.com/tps/O1CN01DM6ioT22YVYDAoxET_!!6000000007132-0-yinhe.jpg_140x140q90.jpg_.webp', img2: '//gw.alicdn.com/tps/O1CN01UkqcOM1aO9Gl7On79_!!6000000003319-0-yinhe.jpg_180x180q90.jpg_.webp' },
                
            ]
    }
}
}
</script>

<style scoped>
.discount{
    width: 7.14rem;
    height: 3.67rem;
    margin:auto;
    margin-top:.12rem;
    border-radius: .24rem;
    position: relative;
}
.discount .bcg{
    width: 7.14rem;
    height: 3.67rem;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 999;
    background: url(//gw.alicdn.com/imgextra/i4/O1CN01GRrTAV1C7c9I5ykhS_!!6000000000034-2-tps-714-368.png_q90.jpg_.webp) no-repeat center/100% 100%;
}
.van-grid {
    width: 7.14rem;
    height: 3.67rem;
     background: url(//gw.alicdn.com/imgextra/i4/O1CN01GRrTAV1C7c9I5ykhS_!!6000000000034-2-tps-714-368.png_q90.jpg_.webp) no-repeat center/100% 100%;
}
.van-grid-item__content {
    width: 3.57rem;
    height: 1.84rem;
    padding: 0;
    position: relative;
}
.top{
    width: 2.16rem;
    height: .44rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
   position: absolute;
   top:0;
   left: 0;
   padding-left: .12rem;
}
.top h5{
     font-size: .32rem;
}
.top p{
    width: .96rem;
    height: .28rem;
    line-height: .28rem;
    padding: 0 .06rem;
    font-size: .22rem;
    color:#fff;
    background-color: rgb(255, 66, 0);
}
.bottom{
    margin-top: .5rem;
    display: flex;
}
.bottom img{
    width: 1.26rem;
    height: 1.26rem;
}
.bottom a:nth-child(1){
    display: inline-block;
    margin-right: .33rem;
  
}
.bottom a:nth-child(2){
width: 1.6rem;
    height: 1.6rem;
}
.van-grid-item{
    height: 1.84rem;
}
</style>